<template>
	<view class="addSchool p30">
		<view class="card form p20">
			<view class="formItem">
				<view class="lable">学校名称</view>
				<view class="value">
					<up-input v-model="departmentName" placeholder="请输入学校" border="surround"></up-input>
				</view>
			</view>
			<view class="formItem">
				<view class="lable">学校所在城市</view>
				<view class="value">
					<up-input v-model="city" placeholder="请输入学校所在城市" border="surround"></up-input>
				</view>
			</view>
			<view class="formItem">
				<view class="lable">归属区域</view>
				<!-- regional_stationmaster -->
				<view class="value">
					<view class="user dis" v-if="schoolAdmin1.userId">
						<view class="userImg">
							<image :src="schoolAdmin1.userImg" mode="aspectFill"></image>
						</view>
						<view class="userName">{{ schoolAdmin1.userName }}</view>
					</view>
					<view class="user dis" v-else @click="open('regional_stationmaster')">
						<view class="userClick">请选择区域站长</view>
					</view>
				</view>
			</view>
			<view class="formItem">
				<view class="lable">学校站长</view>
				<!-- stationmaster -->
				<view class="value">
					<view class="user dis" v-if="schoolAdmin2.userId">
						<view class="userImg">
							<image :src="schoolAdmin2.userImg" mode="aspectFill"></image>
						</view>
						<view class="userName">{{ schoolAdmin2.userName }}</view>
					</view>
					<view class="user dis" v-else @click="open('stationmaster')">
						<view class="userClick">请选择学校站长</view>
					</view>
				</view>
			</view>
			<view class="formItem">
				<view class="lable">学校详细地址</view>
				<view class="value">
					<up-textarea v-model="address" placeholder="请输入学校详细地址"></up-textarea>
				</view>
			</view>
		</view>
		<view class="formBut" @click="addSchoolFun">创建</view>
	</view>
	<up-popup :show="show" closeOnClickOverlay mode="right" @close="offPop">
		<view class="userAdmin">
			<view class="search p20 dis">
				<view class="inputU">请选择用户</view>
				<view class="userBut closeBut" @click="offPop">
					<up-icon name="close"></up-icon>
				</view>
			</view>
			<view class="search p20 dis">
				<view class="inputU">
					<up-input v-model="nickname" placeholder="请输入关键词" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"></up-input>
				</view>
				<view class="userBut" @click="searchFun">搜索</view>
			</view>
			<view class="userList" v-if="memberList.length > 0">
				<scroll-view scroll-y class="scroll_container">
					<view class="userItem p20 dis" v-for="item in memberList" :key="item.id" @click="editUser(item)">
						<view class="userImg">
							<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
							<image v-else src="/post/static/default_avatar.jpg" mode="aspectFill"></image>
						</view>
						<view class="userInfo dis">
							<view class="name">{{ item.nickname }}</view>
							<view class="school">{{ item.departmentName }}</view>
						</view>
					</view>
					<view class="noData">没有更多了</view>
				</scroll-view>
			</view>
			<view class="noData" v-else>暂无数据</view>
		</view>
	</up-popup>
</template>

<script setup>
import { getMember, addSchool } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';

const departmentName = ref('');
const city = ref('');
const address = ref('');
const stationmasters = ref([]);
const addSchoolFun = async () => {
	let userList = [];
	if (!departmentName.value) {
		uni.showToast({
			title: '请选择学校',
			icon: 'none'
		});
		return;
	}
	if (!schoolAdmin1.value.userId) {
		uni.showToast({
			title: '请选择区域站长',
			icon: 'none'
		});
		return;
	} else {
		userList.push({
			userId: schoolAdmin1.value.userId,
			roleType: 'regional_stationmaster'
		});
	}
	if (!schoolAdmin2.value.userId) {
		uni.showToast({
			title: '请选择学校站长',
			icon: 'none'
		});
		return;
	} else {
		userList.push({
			userId: schoolAdmin2.value.userId,
			roleType: 'stationmaster'
		});
	}

	const data = {
		departmentName: departmentName.value,
		city: city.value,
		address: address.value,
		stationmasters: userList
	};
	const res = await addSchool(data);
	// console.log(res);
	uni.showToast({
		title: res.message,
		icon: 'none'
	});
	if (res.code == 0) {
		uni.navigateBack({
			delta: 1
		});
	}
};

const schoolAdmin1 = ref({
	userId: '',
	userName: '',
	userImg: '',
	roleType: 'regional_stationmaster'
});
const schoolAdmin2 = ref({
	userId: '',
	userName: '',
	userImg: '',
	roleType: 'stationmaster'
});

// 新增
const show = ref(false);
const roleType = ref('');
const open = (str) => {
	roleType.value = str;
	getMemberList();
	show.value = true;
};
const nickname = ref('');
const pageNum = ref(1);
const pageSize = ref(900);
const total = ref(0);
const memberList = ref([]);
const getMemberList = async () => {
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		nickname: nickname.value
	};
	const res = await getMember(data);
	// console.log(res);
	if (res.code == 0) {
		total.value = res.data.pageInfo.total;
		show.value = true;
		memberList.value = res.data.pageInfo.list;
	}
};
const searchFun = () => {
	pageNum.value = 1;
	memberList.value = [];
	getMemberList();
};
const offPop = () => {
	show.value = false;
	roleType.value = '';
};
const editUser = async (item) => {
	// console.log(item);
	if (roleType.value == 'stationmaster') {
		schoolAdmin2.value.userId = item.id;
		schoolAdmin2.value.userName = item.nickname;
		schoolAdmin2.value.userImg = item.avatar;
	} else {
		schoolAdmin1.value.userId = item.id;
		schoolAdmin1.value.userName = item.nickname;
		schoolAdmin1.value.userImg = item.avatar;
	}
	offPop();
};
</script>

<style scoped lang="scss">
.addSchool {
	width: 100%;
	.form {
		width: 100%;
		.formItem {
			width: 100%;
			font-size: 26rpx;
			.lable {
				line-height: 75rpx;
				color: #8f9ca2;
			}
			.value {
				width: 100%;
				.user {
					align-items: center;
					padding: 10rpx;
					width: 100%;
					border: 1rpx solid #dadbde;
					border-radius: 8rpx;
					.userImg {
						margin-right: 20rpx;
						width: 65rpx;
						height: 65rpx;
						border-radius: 50%;
						background: #f9fafb;
						overflow: hidden;
					}
					.userClick {
						padding-left: 10rpx;
						color: #c0c4cc;
						line-height: 65rpx;
					}
				}
			}
		}
	}
	.formBut {
		margin: 0 auto;
		margin-top: 20rpx;
		width: 250rpx;
		height: 75rpx;
		line-height: 75rpx;
		font-size: 26rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #2563eb;
		color: #fff;
	}
}
.userAdmin {
	.search {
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #fff;
		.inputU {
			flex: 1;
		}
		.userBut {
			width: 120rpx;
			text-align: center;
		}
		.closeBut {
			width: 70rpx !important;
		}
	}
	.userList {
		width: 100%;
		height: 83vh;
		background-color: #f7f7f7;
		overflow: hidden;
		.scroll_container {
			height: 100%;
		}
		.userItem {
			margin-bottom: 20rpx;
			width: 100%;
			background-color: #fff;
			.userImg {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #f7f7f7;
			}
			.userInfo {
				flex-direction: column;
				justify-content: space-between;
				padding: 5rpx 20rpx;
				.name {
					font-size: 28rpx;
					font-weight: 700;
					color: #676767;
				}
				.school {
					font-size: 26rpx;
					color: #888;
				}
			}
		}
	}
	.noData {
		width: 100%;
		color: #999;
		text-align: center;
	}
}
</style>
<style>
page {
	background-color: #f5f6fb;
}
image {
	width: 100%;
	height: 100%;
}
.modalBut {
	align-items: center;
	justify-content: space-around;
	width: 100%;
}
.custom_btn {
	width: 40%;
	height: 70rpx;
	line-height: 70rpx;
	border-radius: 35rpx;
	text-align: center;
	color: #fff;
	background-color: #3391e6;
}
.nodeBut {
	color: #515151;
	background-color: #f0f0f0;
}

.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.noData {
	width: 100%;
	color: #999;
	text-align: center;
}
</style>
